<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css" />
	</head>
	<style type="text/css">
		body {
			background-color: #F3F3F3;
		}
		.mui-content {
			width: 100%;
			height: 100%;
			background-color: #F3F3F3;
			-webkit-overflow-scrolling: touch;
		}
		.header-bg-div {
			width: 100%;
			height: 200px;
			background: url(../img/index/goods_image.png);
			background-size: 100% 100%;
			position: relative;
		}
		.shadow-div {
			width: 100%;
			height: 200px;
			text-align: center;
			background-color: rgba(255, 255, 255, 0.8);
		}
		.image-icon {
			width: 82px;
			height: 82px;
			border-radius: 50%;
			align-self: center;
			margin-top: 22px;
		}
		.peersShow {
			width: 100%;
			margin-bottom: 14px;
		}
		.span-integral {
			font-size: 10px;
			color: #434343;
			margin-top: 4px;
		}
		.span-signature {
		    font-size: 13px;
		    color: #434343;
		    line-height: 15px;
		}
		.signature-icon {
			width: 12px;
			height: 12px;
		}
		.item-icon {
			width: 17px;
			height: 17px;
			margin-right: 8px;
			margin-left: 14px;
			margin-top: 2px;
			float: left;
		}
		/*.button-participate {
			margin-top: 27px;
			font-size: 13px;
			color: #E9A282;
			border-radius: 15px;
			border-color: #F27B46;
			border-width: 1px;
		}*/
		.btn-order-title {
			height: 51px;
			width: 28%;
			font-size: 15px;
			color: #A40000;
			font-family: PingFang-SC-Regular;
			border-color: transparent;
			border-bottom-color: #E08153;
			border-bottom-width: 2px;
			background: transparent;
			padding: 0;
		}
		.btn-orderH {
			height: 51px;
			width: 22%;
			font-size: 15px;
			color: #404040;
			font-family: PingFang-SC-Regular;
			border: none;
			background: transparent;
		}
		.title-div {
			margin-bottom: 14px;
		}
		.order-div {
			margin: 10px 14px 0px 14px;
		}
		.evaluation-div {
			margin: 0px 14px 0px 14px;
		}
		.item-order-div {
			position: relative;
			display: -webkit-box;
			background-color: white;
		}
		.item-evaluation-div {
			margin-top: 5px;
			position: relative;
			display: -webkit-box;
			background-color: white;
			height: 89px;
			border-radius: 8px;
		}
		.item-evaluation-list {
			margin-top: 5px;
			position: relative;
			display: -webkit-box;
			background-color: white;
			height: 75px;
			border-radius: 8px;
		}
		.goods-image {
			width: 62px;
			height: 62px;
			margin: 14px 0px 10px 20px;
		}
		.evaluation-icon {
			width: 25px;
			height: 25px;
			border-radius: 50%;
			margin-top: 15px;
		}
		.evaluation-star {
			width: 10px;
			height: 10px;
			margin: 30px 0px 10px 23px;
		}
		.order-info-div {
			margin-top: 14px;
			margin-left: 14px;
			margin-bottom: 14px;
		}
		.evaluation-icon-div {
			text-align: center;
			width: 70px;
			height: 75px;
		}
		.details-div {
			background: white;
			text-align: center;
			border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
		}
		.details {
			width: 14px;
			height: 8px;
		}
		.details-star {
			width: 12px;
			height: 12px;
			margin-top: 20px;	
			padding: 2px;	
		}
		.goods-name {
			color: #BDBDBD;
			font-size: 13px;
		}
		.goods-name-evaluation {
			color: #444444;
			font-size: 14px;
			margin-top: 10px;
			font-family: "PingFang-SC-Regular";
		}
		.order-number {
			font-size: 13px;
			color: #6B6B6B;
			font-family: "PingFang-SC-Regular";
		}
		.price {
			font-size: 14px;
			color: #6B6B6B;
			font-family: "PingFang-SC-Regular";
		}
		.order-info {
			font-size: 10px;
			color: #BDBDBD;
			font-family: "PingFang-SC-Regular";
		}
		.total-div {
			position: absolute;
			right: 15px;
			top: 36px;
			text-align: right;
		}
		.price-span {
			color: #E46918;
			font-size: 14px;
			font-family: "PingFang-SC-Regular";
		}
		.symbol-span {
			color: #E46918;
			font-size: 10px;
			font-family: "PingFang-SC-Regular";
		}
		.evaluation-item {
			color: #9F9F9F;
			font-size: 10px;
			line-height: 16px;
			padding-top: 5px;
			font-family: "PingFang-SC-Regular";
		}
		.evaluation-date {
			color: #9F9F9F;
			font-size: 10px;
			line-height: 18px;
			padding-top: 5px;
			position: absolute;
			top:45px;
			left: 0px;
			width: 145px;
			font-family: "PingFang-SC-Regular";
		}
		.overflow {
			display: -webkit-box;
			overflow:hidden;
       		text-overflow:ellipsis;
       		-webkit-box-orient: vertical;
     		-webkit-line-clamp: 2;
		}
		.line-div {
			margin-top: 20px;
			height: 1px;
			background-color: #C5C5C5;
		}
		/*快递详情*/
		.courier {
			color: #9D9D9D;
			font-size: 15px;
			line-height: 14px;
			height: 14px;
			margin-left: 14px;
		}
		.li-courier {
			color: #9D9D9D;
			font-size: 13px;
			margin: 10px;
		}
		.li-no-point {
			list-style-type: none;
		}
		.vertical {
			height: 23px;
			width: 2px;
			background: #C5C5C5;
			float: left;
			margin-left: 14px;
		}
		.collection-div {
			height: 46px;
			padding-top: 15px;
		}
		.margin {
			margin: 0;
		}
		.line-margin {
			height: 1px;
			background: #C5C5C5;
			margin: 15px 0px 10px 0px;
		}
		.float {
			float: right;
			margin-top: 8px;
			margin-right: 14px;
		}
		.margin-left {
			margin-left:22px ;
		}
		.padd-top {
			padding-top: 10px;
		}
		.spacing {
			margin-top: 10px;
			margin-bottom: 10px;
		}
		.now-evaluate-info {
			margin: 0px 14px 0px 14px;
		}
		.item-order{
			padding-top: 10px;
			background-color: #FFFFFF;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
		}
		.item-order-NO {
			margin-left: 10px;
			font-size: 13px;
			color: #444444;
			font-family: "PingFang-SC-Regular";
		}
		.item-order-total {
			margin-right: 10px;
			float: right;
			font-size: 13px;
			color: #444444;
			font-family: "PingFang-SC-Regular";
		}
	</style>

	<body>
		<div class="mui-content">
			<div class="header-bg-div">
				<div class="shadow-div">
					<img class="image-icon" />
					<div class="span-integral"></div>
					<div class="peersShow">
						<img class="signature-icon" src="../img/goods/signature_icon.png" />
						<span class="span-signature"></span>
					</div>
				<!--<button type="button" class="button-participate">我的参与</button>-->
				</div>
			</div>

			<div class="title-div">
				<button type="button" id="order0" class="btn-order-title">进行中订单</button>
				<button type="button" id="order1" class="btn-orderH">待付款</button>
				<button type="button" id="order2" class="btn-orderH">待评价</button>
				<button type="button" id="order3" class="btn-orderH">全部订单</button>
			</div>
			<div id="orderListDiv"></div>

			
			<div class="line-div"></div>
			<!--<div class="collection-div">
				<div class="peersShow">
					<img class="item-icon" src="../img/person/star_header.png" />
					<span class="courier">我的收藏</span>
					<img class="details float" src="../img/person/go.png" />
				</div>
			</div>-->
			<div class="line-div margin"></div>
			<div class="collection-div">
				<div class="peersShow">
					<img class="item-icon" src="../img/person/star_header.png" />
					<span class="courier">购买的商品有了新的评价</span>
				</div>
			</div>
			<div class="now-evaluate-info">
				<!--<div id="goodsDetail" class="item-evaluation-div">
					<div id="goodsID" style="display: none;"></div>
					<img id="goodsImg" class="goods-image"/>
					<div class="order-info-div">
						<div class="goods-name-evaluation"></div>
						<span class="price"></span>
					</div>
					<div class="total-div">
						<div><span class="symbol-span">¥</span><span id="totalSpan" class="price-span"></span></div>
					</div>
				</div>-->
			</div>
			<div id="evaluationList">
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var userID = base.getParameter("userID");
		$(function() {
			var url = base.url.myCenter;
			var data = {
				userID: userID
			}
			base.postData(url,data,getDataSuccess);
		});
		function getDataSuccess(data) {
			if (data.success) {
				var dataInfo = data.context;
				$(".image-icon").attr("src", dataInfo.userInfo.headImg);
				$(".span-integral").text("积分："+dataInfo.userInfo.integral);
				$(".span-signature").text(dataInfo.userInfo.signature.substring(0, 20));
				var tempEvaluateList = dataInfo.nowEvaluateInfo;
				var orderHtml = '';
				for(var index in dataInfo.orderList) {
					orderHtml += getOrderListItem(dataInfo.orderList[index], index);
				}
				$("#orderListDiv").html(orderHtml);
				var html = '';
				for(var index in tempEvaluateList) {
					html += getCustomerEvaluationListItem(tempEvaluateList[index], index);
				}
				$("#evaluationList").html(html);
			} else {
				mui.toast(data.msg);
			}
		}
		function getCustomerEvaluationListItem (item,index) {
			var html = '';
			html += '<div class="item-evaluation-div">'
			html += '	<div id="goodsID" style="display: none;">'+item.goodsID+'</div>'
			html += '	<img id="goodsImg" class="goods-image" src='+item.goodsImg+' />'
			html += '	<div class="order-info-div">'
			html += '		<div class="goods-name-evaluation">'+item.goodsName+'</div>'
			html += '		<span class="price">'+(item.price/100)+'</span>'
			html += '	</div>'
			html += '	<div class="total-div">'
			html += '		<div><span class="symbol-span">¥</span><span class="price-span">'+item.totalPrice+'</span></div>'
			html += '	</div>'
			html += '</div>'
			html += '<div class="line-div spacing"></div>'
			for(var i in item.evaluateList) {
				html += '<div class="evaluation-div">'
				html += '	<div class="item-evaluation-list">'
				html += '		<div class="evaluation-icon-div">'
				html += '			<img class="evaluation-icon" src='+ item.evaluateList[i].headImg +' />'
				html += '			<div class="evaluation-item overflow">' + item.evaluateList[i].evaluator + '</div>'
				html += '		</div>'
				html += '		<div style="padding-top: 3px;margin-right: 80px;position: relative;">'
				html += '			<div class="evaluation-item padd-top overflow">'+item.evaluateList[i].content+'</div>'
				html += '			<span class="evaluation-date">'+item.evaluateList[i].createTime+'</span>'
				html += '		</div>'
				html += '		<div class="total-div">'
				for (var j=0;j < 5; j++) {
					if (j<item.evaluateList[i].stars) {
						html += '			<img class="star-icon" src="../img/person/star.png" />'
					} else {
						html += '			<img class="star-icon" src="../img/person/star_h.png" />' 
					}
				}
				html += '		</div>'
				html += '	</div>'
				html += '</div>'
			}
			return html;
		}		
		function getOrderListItem(item, index) {
			var html = '';
			html += '<div id="order-div" class="order-div" data-index="' + index + '">'
			html += '	<div class="item-order">'
			html += '		<span class="item-order-NO">订单号:'+ item.orderNo +'</span>'
			html += '		<span class="item-order-total">总价:'+item.totalPrice+'</span>'
			html += '	</div>'
			for(var j in item.orderDetail) {
				html += '	 <div class="item-order-div">'
				html += '		<img class="goods-image" src=' + item.orderDetail[j].goodsImg + ' />'
				html += '		<div class="order-info-div">'
				html += '			<div class="goods-name">' + item.orderDetail[j].goodsName + '</div>'
				html += '			<div><span class="order-number">订单号:</span><span class="price">' + item.orderDetail[j].number + '</span></div>'
				html += '		</div>'
				html += '		<div class="total-div">'
				html += '			<div><span class="symbol-span">¥</span><span class="price-span">' + item.orderDetail[j].totalPrice + '</span></div>'
				html += '		</div>'
				html += '	</div>'
			}
			html += '	<div class="details-div">'
			html += '		<img class="details" src="../img/person/open.png"/></div>'
			html += '	<div class="detailsList">'
			for(var i in item.logisticsList) {
				html += '	<div class="line-div"></div>'
				html += '	<li class="li-courier">' + item.logisticsList[i].alreadyOrderTime + '</li>'
				html += '	<div class="peersShow">'
				html += '		<div class="vertical"></div>'
				html += '		<span class="courier">' + item.logisticsList[i].alreadyOrder + '</span>'
				html += '	</div >'
			}
			html += '	</div>'
			html += '</div>'
			return html;
		}
//          点击展开
		var showDteils = false;
		mui('#orderListDiv').on('tap','.order-div', function() {
//			var details = $(this).find(".details");
			var detailsList = $(this).find(".detailsList");
			if (showDteils) {
				showDteils = false;
//				details.attr("src", "../img/person/open.png");
				detailsList.show();
			} else {
				showDteils = true;
//				details.attr("src", "../img/person/open.png");
				detailsList.hide();
			}
		});
		function getEvaluationListItem(item, index) {
			var html = '';
			html += '<div class="order-div" data-index="' + index + '">'
			html += '	 <div class="item-order-div">'
			html += '		<img class="goods-image" src=' + item.goodsImage + '/>'
			html += '		<div class="order-info-div">'
			html += '			<div class="goods-name">' + item.goodsName + '</div>'
			html += '			<div><span class="order-number">订单号:</span><span class="price">' + item.orderNum + '</span></div>'
			html += '		</div>'
			html += '		<div class="total-div">'
			html += '			<div><span class="symbol-span">¥</span><span class="price-span">' + item.total + '</span></div>'
			html += '		</div>'
			html += '	</div>'
			html += '	<div class="details-div">'
			html += '	<img class="details" src=' + item.goodsImage + '/></div>'
			html += '	<div class="line-div"></div>'
			for(var i in item.stateList) {
				html += '		<li class="li-courier">' + item.stateList[i].date + '</li>'
				html += '		<div class="peersShow">'
				html += '			<div class="vertical"></div>'
				html += '			<span class="courier">' + item.stateList[i].state + '</span>'
				html += '		</div >'
			}
			html += '</div>'
			return html;
		}
		$(".shadow-div").on("tap", ".image-icon", function() {
		    parent.location.href = "personInfo.html?userID="+userID;
		});
		$(".title-div").on("tap","#order0",function(){
			parent.location.href = "order.html?userID="+userID+"&orderType=2&isFromHomePage=1";
		})
		$(".title-div").on("tap","#order1",function(){
			parent.location.href = "order.html?userID="+userID+"&orderType=1&isFromHomePage=1";
		})
		$(".title-div").on("tap","#order2",function(){
			parent.location.href = "order.html?userID="+userID+"&orderType=3&isFromHomePage=1";
		})
		$(".title-div").on("tap","#order3",function(){
			parent.location.href = "order.html?userID="+userID+"&orderType=0&isFromHomePage=1";
		})
		$(".order-div").on("tap","#goodsDetail",function(){
			var goodsID = $("#goodsID").text();
			parent.location.href = "goodsDetail.html?userID="+userID+'&goodsID='+goodsID;
		})
	</script>
</html>